<template>
  <div class="header-menu">
    <el-menu @select="handleSelect" active-text-color="#07a1b2" text-color="#07a1b2" background-color="#002b36"
      :collapse="true">
      <el-sub-menu>
        <template #title>
          <div :style="{ backgroundImage: 'url(' + listPng + ')' }" class="menu-setting"></div>
        </template>
        <el-menu-item-group>
          <el-menu-item style="height: 30px;line-height: 30px;" index="openDir">打开文件夹</el-menu-item>
          <el-menu-item style="height: 30px;line-height: 30px;" index="about">关于</el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { ElMessageBox, Action } from 'element-plus';
import listPng from '@/assets/menu/list.png';
import useFileStore from '@/store/file';
const fileStore = useFileStore();

const { fileSend, fileOn } = window.electronApi;

const openDirFn = () => {
  fileSend({ type: 'getDir' })
}

// 监听通信
fileOn(function (event: any, message: any) {
  const { type, data } = message;
  switch (type) {
    case 'getDir':
      fileStore.updateDirPath(data);
      break;
    default:
      return false;
  }
})
const handleSelect = (key: string, keyPath: string[]) => {
  switch (key) {
    case 'about':
      // 关于
      aboutFn();
      break;
    case 'openDir':
      openDirFn();
      break;
    default:
      break;
  }
}

// 关于功能
const aboutFn = () => {
  ElMessageBox.alert('麻雀应用程序基于electron + vue 开发。', '关于', {
    showConfirmButton: false,
    closeOnClickModal: true,
    // modal: false,
    callback: (action: Action) => {

    },
  })
}

</script>
<style lang="scss">
.header-menu {
  .el-menu {
    border-right: 0;

    .el-sub-menu__title {
      height: 50px;
      width: 50px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>

<style lang="scss" scoped>
.header-menu {

  .el-menu {
    height: 50px;
    width: 50px;
    padding: 0;



    .menu-setting {
      width: 20px;
      height: 20px;

      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }
  }
}
</style>